<template>
  <div class="product-panel-wrapper">
    <div class="panel-part" :class="{ collapsed: collapse[0] }">
      <div
        class="part-title"
        :title="collapse[0] ? '点击展开' : '点击收起'"
        @click="handleCollapse(0)"
      >
        <span>模式选择</span>
        <i :class="collapse[0] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
      <div class="part-content">
        <ul>
          <li
            class="mode-btn"
            v-for="(mode, index) in modesSelect"
            :key="index"
          >
            <el-button
              size="mini"
              :type="forecast.pattern === mode.value ? 'primary' : 'default'"
              @click="changeMode(mode, index)"
            >
              {{ mode.label }}
            </el-button>
          </li>
        </ul>
      </div>
    </div>
    <div class="panel-part" :class="{ collapsed: collapse[1] }">
      <div
        class="part-title"
        :title="collapse[1] ? '点击展开' : '点击收起'"
        @click="handleCollapse(1)"
      >
        <span>起报时间</span>
        <i :class="collapse[1] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
      <div class="part-content">
        <div class="part-date">
          <el-date-picker
            v-model="forecast.date"
            type="date"
            value-format="yyyy-MM-dd"
            size="mini"
            placeholder="请选择预报日期"
            @change="changeDate"
          >
          </el-date-picker>
        </div>
        <el-radio-group v-model="forecast.startTime" @change="changeTime">
          <el-radio
            v-for="(hour, index) in hoursSelect"
            :key="hour.value"
            :label="hour.value"
          >
            {{ hour.label }}
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <div class="panel-part" :class="{ collapsed: collapse[2] }">
      <div
        class="part-title"
        :title="collapse[2] ? '点击展开' : '点击收起'"
        @click="handleCollapse(2)"
      >
        <span>时效选择</span>
        <i :class="collapse[2] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
      <div class="part-content">
        <ul>
          <li
            class="period-btn"
            v-for="(period, index) in periodsSelect"
            :key="index"
          >
            <el-button
              size="mini"
              :type="forecast.moment === period.value ? 'primary' : 'default'"
              @click="changePeriod(period)"
            >
              {{ period.label }}
            </el-button>
          </li>
        </ul>
      </div>
    </div>
    <div
      class="panel-part"
      :class="{ collapsed: collapse[3] }"
      v-if="path === '/dzyb'"
    >
      <div
        class="part-title"
        :title="collapse[3] ? '点击展开' : '点击收起'"
        @click="handleCollapse(3)"
      >
        <span>产品选择</span>
        <i :class="collapse[3] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
      <div class="part-content">
        <el-checkbox-group v-model="products">
          <el-checkbox
            v-for="pro in productsSelect"
            :key="pro.value"
            :label="pro.value"
            @change="
              (val) => {
                changeProduct(val, pro);
              }
            "
          >
            {{ pro.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div class="panel-part" :class="{ collapsed: collapse[4] }">
      <div
        class="part-title"
        :title="collapse[4] ? '点击展开' : '点击收起'"
        @click="handleCollapse(4)"
      >
        <span>站点搜索</span>
        <i :class="collapse[4] ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
      </div>
      <div class="part-content site-search-box">
        <!-- <el-tooltip
          placement="left"
          :content="siteSearch"
          :disabled="!siteSearch"
        > -->
        <el-select
          v-model="siteSearch"
          clearable
          filterable
          remote
          reserve-keyword
          placeholder="请输入站点"
          size="mini"
          :remote-method="getSites"
          :loading="siteSearching"
          @focus="getSites('')"
          @change="selectSite"
        >
          <el-option
            v-for="item in sites"
            :key="item.stationNumber"
            :label="item.stationName"
            :value="item.stationNumber"
          />
        </el-select>
        <!-- </el-tooltip> -->
        <el-button type="primary" size="mini" @click="handleSiteSearch">
          搜索
        </el-button>
      </div>
    </div>
    <div class="panel-btn">
      <el-button size="small" type="warning" @click="makeProduct">
        产品制作
      </el-button>
    </div>
  </div>
</template>

<script>
import { periods, product } from '@/utils/constant.js'
import { getAction } from '@/api/action';
import dayjs from 'dayjs'
export default {
  name: 'Product',
  props: {
    modesSelect: Array,
    hoursSelect: Array,
    path: String,
  },
  data() {
    return {
      collapse: [0, 0, 0, 0, 0],
      // hoursSelect: [{
      //   label: '08',
      //   value: '8',
      // }, {
      //   label: '02',
      //   value: '2',
      // }, {
      //   label: '14',
      //   value: '14',
      // }, {
      //   label: '20',
      //   value: '20',
      // }],
      periodsSelect: periods,
      productsSelect: product,
      products: ['0'], // 产品选择
      forecast: {
        pattern: this.modesSelect[0].value, // 模式
        startTime: this.hoursSelect[0].value, // 起报
        date: dayjs().format('YYYY-MM-DD'),
        moment: '12', // 时效
      },
      sites: [],
      siteSearching: false,
      siteSearch: "", // 站点
      urls: {
        sites: '/api/sites/getAllSites', // 查询所有站点
        getSites: '/api/sites/getByNoStaionData', // 模糊查询站点信息
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getForecast();
    },
    // 雨量订正查询
    getForecast() {
      this.$emit('get-forecast', this.forecast)
    },
    handleCollapse(index) {
      this.$set(this.collapse, index, !this.collapse[index]);
    },
    // 初始 获取5条数据作参考
    initSites() {
      getAction(this.urls.sites, {
        pageNo: 1,
        pageSize: 5
      }).then((res) => {
        // console.log(res);
        this.sites = res.objects;
      })
    },
    // 查询站点
    getSites(StaionName) {
      getAction(this.urls.getSites, { StaionName }).then(res => {
        if (res.msg === '成功') {
          this.sites = res.objects;
        }
      })
    },
    //本地根据站号查询站点
    getSiteByNumber() {
      let site = {};
      this.sites.forEach(item => {
        if (item['stationNumber'] == this.siteSearch) site = item
      })
      console.log('site', site);
      return site;
    },
    // 选择站点
    selectSite(arg) {
      console.log('选择站点', arg);
    },
    // 站点搜索
    handleSiteSearch() {
      this.$emit('site-search', this.getSiteByNumber());
    },
    // 制作产品
    makeProduct() {
      this.$emit('make-product', this.forecast);
    },
    // 改变模式
    changeMode(item) {
      this.forecast.pattern = item.value;
      this.getForecast();
    },
    // 改变日期
    changeDate(val) {
      console.log('日期', val);
      this.getForecast();
    },
    // 改变起报时间
    changeTime(val) {
      console.log('起报时间', val);
      this.getForecast();
    },
    // 改变时效
    changePeriod(item) {
      this.forecast.moment = item.value;
      // this.getForecast();
      // 雨量订正 一次查询所有时效的数据，风险不同的时效需要单独查询
      this.$emit('change-period', this.forecast);
    },
    changeProduct(val, item) {
      this.$emit('check-product', val, item);
    }
  },
}
</script>

<style lang="scss">
.product-panel-wrapper {
  position: absolute;
  right: 20px;
  top: 130px;
  width: 270px;
  max-height: calc(100% - 160px);
  overflow-y: auto;
  border-radius: 2px;
  // border: 1px solid #cccccc;
  background-color: #fff;
  box-shadow: -2px 0px 9.5px 0.5px rgba(165, 165, 165, 0.3);
  z-index: 100;

  .panel-part {
    .part-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 1em;
      font-size: 14px;
      font-family: "SimSun";
      color: rgb(85, 132, 255);
      border-bottom: 1px solid #cac6c6;
      span {
        margin-bottom: -1px;
        display: inline-block;
        padding: 0.8em 1em;
        border-bottom: 2px solid #3385ff;
      }
    }
    .part-content {
      padding: 0.6em 1em;
      overflow: hidden;
      transition: all 0.3s;
      .part-date {
        padding: 0 1em;
        margin-bottom: 1em;
        .el-input {
          width: 100%;
        }
      }
      ul {
        li {
          display: inline-block;
          width: 50%;
          text-align: center;
          .el-button {
            width: 100%;
            &.el-button--default {
              border-color: #cccccc;
              &:hover,
              &:active {
                border-color: #e8f4ff;
              }
            }
          }
        }
        .mode-btn {
          padding: 0 1em 0.5em 1em;
        }
        .period-btn {
          padding: 0 1em 0.5em 1em;
        }
      }
      .el-radio-group {
        width: 100%;
        .el-radio {
          display: inline-block;
          width: 25%;
          padding: 0 1em;
          margin-right: 0;
          .el-radio__label {
            padding-left: 0;
          }
        }
      }
      .el-checkbox-group {
        .el-checkbox {
          display: inline-block;
          width: 50%;
          padding: 0 1em;
          margin-right: 0;
          .el-checkbox__label {
            padding-left: 5px;
          }
        }
      }
      &.site-search-box {
        padding: 1em 2em;
        display: flex;
      }
    }
    &.collapsed {
      .part-content {
        height: 0;
        padding-bottom: 0;
      }
    }
  }
  .panel-btn {
    text-align: center;
    margin: 1em 0;
    .el-button--warning {
      width: 161px;
      // height: 35px;
    }
  }
}
</style>
